<template>
  <!-- 查询抽屉 -->
  <el-drawer
    v-model="visible"
    title="高级查询"
    direction="rtl"
    size="420px"
    :before-close="handleCancel"
  >
    <!-- 动态表单 -->
    <el-form
      ref="formRef"
      :model="searchFormData"      
      label-width="100px"
      require-asterisk-position="right"
    >
      <el-form-item
        v-for="f in fields"
        :key="f.field"
        :label="f.label"
        :prop="f.field"
        :rules="buildRules(f)"
      >
        <!-- switch -->
        <el-switch
          v-if="f.input_type === 'switch'"
          v-model="searchFormData[f.field]"
          :active-value="true"
          :inactive-value="false"
        />
<el-select
  v-else-if="f.input_type === 'select'"
  v-model="searchFormData[f.field]"
  placeholder="请选择"
  clearable
  @clear="delete searchFormData[f.field]"
>
  <el-option
    v-for="opt in (f.options || [])"
    :key="opt.value"
    :label="opt.label"
    :value="opt.value"
  />
</el-select>

        <!-- 日期 / 时间 -->
        <el-date-picker
          v-else-if="f.input_type === 'date' || f.input_type === 'datetime'"
          v-model="searchFormData[f.field]"
          :type="f.input_type === 'date' ? 'date' : 'datetime'"
          placeholder="请选择"
          style="width: 100%"
          clearable
          @clear="delete searchFormData[f.field]"
        />

        <!-- 默认 text -->
        <el-input
          v-else
          v-model="searchFormData[f.field]"
          :placeholder="`请输入${f.label}`"
          clearable
          @clear="delete searchFormData[f.field]"
        />
      </el-form-item>
    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleQuery">查询</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import {  ref, watch ,computed} from 'vue'
import type { FormInstance, FormItemRule } from 'element-plus'
import type { Field } from '@/types'

 
const props = defineProps<{
  modelValue: boolean // 控制显示/隐藏
  fields: Field[]
  data: { type: Object, default: () => ({}) }
}>()

 




const emit = defineEmits<{
  'update:modelValue': [val: boolean]
  search: [payload: Record<string, any>]
  'update:data': [val: Record<string, any>] // 增加此行避免 TS 报错
}>()

const visible = ref(props.modelValue)
const formRef = ref<FormInstance>()
// const searchFormData = reactive<Record<string, any>>({})
// const searchFormData = ref({ ...props.data })
const searchFormData = computed<Record<string, any>>({
  get: () => props.data,                         // 读父层
  set: val => emit('update:data', val)           // 写回父层
})


/* 监听外部 v-model */
watch(() => props.modelValue, val => (visible.value = val))
watch(visible, val => emit('update:modelValue', val))

/* 构造校验规则 */
function buildRules(f: Field): FormItemRule[] {
  const rules: FormItemRule[] = []
  if (f.Validation?.required) {
    rules.push({
      required: true,
      message: `${f.label}不能为空`,
      trigger: f.input_type === 'switch' ? 'change' : 'blur'
    })
  }
  // return rules
  return []
}

/* 查询 */
async function handleQuery() {
  if (!formRef.value) return
  try {
    await formRef.value.validate()
    emit('search', { ...searchFormData.value })
    visible.value = false
  } catch {
    /* 校验失败自动提示 */
  }
}

/* 取消 */
function handleCancel() {
  formRef.value?.resetFields()
  visible.value = false
}
</script>
